<template>
	<view class="container">
		<text class="title">单词列表</text>
		<view class="word-list">
			<view v-for="word in words" :key="word.id" class="word-item">
				<image :src="word.imageUrl" class="word-image"></image>
				<text class="word">{{ word.word }}</text>
				<text class="phonetic">[{{ word.phonetic }}]</text>
				<text class="meaning">{{ word.meaning }}</text>
				<button class="play-button" @click="playAudio(word.audioUrl)">🔊 播放</button>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			words: [],
			categoryId: null
		};
	},
	onLoad(options) {
		this.categoryId = options.categoryId;
		this.fetchWords();
	},
	methods: {
		fetchWords() {
			uni.request({
				url: `http://localhost:80/system/word/list?categoryId=${this.categoryId}`,
				method: 'GET',
				success: (res) => {
					if (res.data) {
						this.words = res.data;
					}
				}
			});
		},
		playAudio(audioUrl) {
			const audio = uni.createInnerAudioContext();
			audio.src = audioUrl;
			audio.play();
		}
	}
};
</script>

<style>
.container {
	text-align: center;
	padding: 20px;
	background-color: #e3f2fd; /* 蓝色背景 */
	min-height: 100vh;
}

.title {
	font-size: 24px;
	font-weight: bold;
	color: #1e88e5; /* 深蓝色标题 */
	margin-bottom: 20px;
}

.word-list {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}

.word-item {
	width: 180px;
	background: #ffffff; /* 白色背景 */
	margin: 15px;
	padding: 15px;
	border-radius: 15px;
	text-align: center;
	display: flex;
	flex-direction: column;
	align-items: center;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	transition: transform 0.3s ease;
}

.word-item:hover {
	transform: scale(1.05);
}

.word-image {
	width: 100px;
	height: 100px;
	margin-bottom: 10px; /* 图片与文本之间的间距 */
	border-radius: 10px;
}

.word {
	font-size: 20px;
	font-weight: bold;
	margin-bottom: 5px; /* 英语单词与音标之间的间距 */
	color: #333;
}

.phonetic {
	color: #666;
	font-size: 16px;
	margin-bottom: 5px; /* 音标与中文意思之间的间距 */
}

.meaning {
	font-size: 16px;
	margin-bottom: 10px; /* 中文与按钮之间的间距 */
	color: #555;
}

.play-button {
	background-color: #42a5f5; /* 蓝色按钮 */
	color: white;
	padding: 8px 12px;
	border-radius: 8px;
	margin-top: 10px;
	cursor: pointer;
	transition: background-color 0.3s ease;
}

.play-button:hover {
	background-color: #1e88e5; /* 深蓝色悬停效果 */
}
</style>
